<template>
  <div>
    <v-chart :options="options" autoresize/>
  </div>
</template>

<script>
export default {
  name: "LineChart",
  components: {},
  props: {
    value: Object,
    ispreview: Boolean
  },
  data() {
    return {
      unit: '',
      options: {
        grid: {
          top: '20%',
          left: '5%',
          right: '5%',
          bottom: '20%'
        },
        color: ['#1E90FF'],
        title: {
          text: "",
          show: false,
          textStyle: {
            color: "#fff"
          }
        },
        tooltip: {
          trigger: "item",
          axisPointer: {               // 坐标轴指示器配置项
            type: 'line',            // 指示器类型，可选值: 'line'（直线指示器），'shadow'（阴影指示器），'cross'（十字准星指示器）
            lineStyle: {             // 直线指示器样式设置
              color: '#CCB7A6'        // 线条颜色
            },
            crossStyle: {            // 十字准星指示器样式设置
              color: '#CCB7A6'        // 线条颜色
            },
            shadowStyle: {           // 阴影指示器样式设置
              color: 'rgba(150,150,150,0.3)'  // 阴影颜色
            }
          }
        },
        legend: {
          textStyle: {
            color: "#fff"
          }
        },
        xAxis: {
          type: "category",
          data: [],
          axisLabel: {
            show: true,
            textStyle: {
              color: "#fff"
            }
          }
        },
        yAxis: {
          name: 'KG',
          nameTextStyle: {     
            // padding: [30, 0, 0, -30],
            color: '#fff'
          },
          type: "value",
          axisLabel: {
            show: false,
            textStyle: {
              color: "#fff"
            }
          },
          inverse: false,
          scale: false,
          splitLine: {
            lineStyle: {
              color:"#1E90FF",
              width:1
            }, 
            show: false
          }
        },
        series: [
          {
            areaStyle: {
              opacity: 0.05,
            },
            data: [],
            lineStyle: {
              width: 4
            },
            itemStyle: {
              normal: {
                color: '#CCB7A6', //改变折线点的颜色
                lineStyle: {
                  color: '#CCB7A6' //改变折线颜色
                }
              }
            },
            // 标签
            label: {
              show: true,
              position: "top",
              distance: 10,
              fontSize: 16,
              color: '#fff',
              fontWeight: 500
            },
            type: "line",
            showSymbol: true,
            smooth: true,
            symbol: "circle",
            symbolSize: 10,

          }
        ]
      }
    };
  },
  computed: {
    
  },
  watch: {
    value(val) {
      this.options.series[0].data = val.y
      this.options.xAxis.data = val.x
      this.unit = val.unit
    }
  },
  created() {
    
  },
  methods: {
  }
};
</script>

<style scoped lang="less">
.test { color: #fff; }
.echarts {
  width: 100%;
  height: 100%;
  overflow: hidden;
  // border: 1px solid #fff;
}

.unit { position: absolute; left: 10px; bottom: 5px; color: #fff; font-size: 14px; }
</style>
